<template>
  <div class="box">
    <Header title="行程详情"></Header>
    <div class="trip-detail-top">
			<div class="img-box">
				<img src="@/assets/temporary/trip-item2.png" alt />
			</div>
			<h3 class="trip-item-title">河南旅游局推荐精华6日线路</h3>
			<div class="trip-item-tag">
				<span>初次必玩</span>
				<span>官方推荐</span>
				<span>云台山仙境游</span>
				<span>天下功夫出少林</span>
			</div>
			<div class="trip-item-collection">
				<div class="img-box"><img src="@/assets/temporary/collection1.png" alt=""></div>
				<div class="img-box"><img src="@/assets/temporary/collection2.png" alt=""></div>
				<div class="img-box"><img src="@/assets/temporary/collection3.png" alt=""></div>
				<div class="img-box"><img src="@/assets/temporary/collection4.png" alt=""></div>
				<span>1903人已收藏</span>
			</div>
    </div>
    <div class="trip-list-box">
			<div class="trip-list-title">
				<span>行程概况</span>
				<router-link to="">全部行程<van-icon name="arrow" color="#42DAC0"/></router-link>
			</div>
			<div class="trip-list-content">
					<div class="trip-list-item">
							<div class="item-title"><i></i>DAY1·郑州</div>
							<div class="item-content">
									<h3>DAY1·一睹《国家宝藏》真容</h3>
									<p>河南博物院-二七广场-老蔡记（二七广场店）-德华商业步行街。</p>
							</div>
					</div>
					<div class="trip-list-item">
							<div class="item-title"><i></i>DAY2·郑州焦作/云台山</div>
							<div class="item-content">
									<h3>DAY2·漫步云台山仙境</h3>
									<p>云台山-潭瀑峡-泉爆峡-猕猴谷</p>
							</div>
					</div>
					<div class="trip-list-item">
							<div class="item-title"><i></i>DAY3·云台山/洛阳</div>
							<div class="item-content">
									<h3>DAY3·登上云台山主峰</h3>
									<p>红石峡-子房湖-叠彩洞-茱萸峰景区-凤凰岭-万善寺</p>
							</div>
					</div>
					<div class="trip-list-item">
							<div class="item-title"><i></i>DAY4·洛阳</div>
							<div class="item-content">
									<h3>DAY4·龙门石窟</h3>
									<p>龙门石窟-白马寺</p>
							</div>
					</div>
			</div>
			<div class="trip-action-box">
				<div class="collection">
					<img src="@/assets/images/collection.png" alt="">
					<p>1903</p>
				</div>
				<div class="share">
					<img src="@/assets/images/share.png" alt="">
					<p>268</p>
				</div>
			</div>
    </div>
    <div class="trip-detail-days">
			<van-tabs v-model="active" scrollspy sticky title-active-color="#0FD2B2">
				<van-tab v-for="(item,index) in list" :key="index" :title="item.tab">
						<div class="trip-days-box">
						<div class="trip-detail-box" >
								<div class="trip-day">
										<p class="trip-day-location"><van-icon name="location" color="#0FD2B2"/>{{item.city}}</p>
										<h3 class="trip-day-title">{{item.title}}</h3>
										<div class="trip-img-box">
												<img :src="item.banner" alt="">
										</div>
										<p class="trip-content-box">{{item.content}}</p>
								</div>
								<div class="trip-line-box" >
										<div v-for="(value,k) in item.lineList" :key="k">
												<div class="trip-line-content">
												<div class="line-content-info">
														<h3 class="content-info-title"><img src="@/assets/images/home-nav-scenic.png" alt="">{{value.name}}</h3>
														<div class="content-info-box">
																<p>{{value.length}}</p>
																<span>{{value.tag}}</span>
														</div>
												</div>
												<div class="line-content-img">
														<img :src="value.img" alt="">
												</div>
										</div>
										<div class="trip-distance"><i></i>{{value.distance}} <div class="left-line"></div></div>
										</div>
										<div class="trip-hotel">
												<h3 class="content-info-title"><img :src="item.hotelImg" alt="">{{item.hotelTitle}}</h3>
												<div class="content-info-box">{{item.hotelContent}}</div>
										</div>
								</div>
								</div>
						</div>
				</van-tab>
			</van-tabs>
    </div>
    
  </div>
</template>

<script>
import Header from "@/components/Header/Header.vue";
import day1Banner from "@/assets/temporary/day1-banner.png"
import scenic1 from "@/assets/temporary/day1-scenic1.png"
import hotelImg from "@/assets/images/home-nav-hotel.png"
export default {
  name: "tripDetail",
  components: { Header },
  data() {
    return {
        active:0,
        daysList:[
            {
                city:'郑州',
                title:'DAY1·一睹《国家宝藏》真容',
                banner:day1Banner,
                content:'第一天乘坐高铁或飞机，抵达河南省会郑州，漫游河南从逛河南博物馆开始，这里可以看到中原大地的起源文化，追溯到五千年前的华夏文明。下午逛完博物馆，搭车前往郑州人气中心二七广场，感受商城浓郁的商业氛围。',lineList:[{name:'河南博物院',img:scenic1,length:'703篇点评，建议玩2小时',tag:'荟萃华夏文明瑰宝之地',distance:'河南博物馆距离二七广场4.1公里'},{name:'二七广场',img:scenic1,length:'506篇点评，建议玩2小时',tag:'郑州中心商业中心',distance:'二七广场距离老蔡记（二七广场店）146米'},{name:'老蔡记（二七广场店）',img:scenic1,length:'96篇点评，9篇游记提及',tag:'地道小吃百年老店',distance:'老蔡记（二七广场店）距离德化商业步行街104米'},{name:'德化商业步行街',img:scenic1,length:'178篇点评，建议玩1小时',tag:'百年历史名街',distance:'河南博物馆距离二七广场4.1公里'}],
                hotelTitle:'住宿攻略',hotelContent:' 第一天乘坐高铁或飞机，抵达河南省会郑州，漫游河南从逛河南博物馆开始，这里可以看到中原大地的起源文化，追溯到五千年前的华夏文明。下午逛完博物馆，搭车前往郑州人气中心二七广场，感受商城浓郁的商业氛围。',hotelImg:hotelImg
            },
            {city:'郑州·焦作·云台山',title:'DAY2· 漫步云台仙境',banner:day1Banner,content:'第一天乘坐高铁或飞机，抵达河南省会郑州，漫游河南从逛河南博物馆开始，这里可以看到中原大地的起源文化，追溯到五千年前的华夏文明。下午逛完博物馆，搭车前往郑州人气中心二七广场，感受商城浓郁的商业氛围。',lineList:[{name:'河南博物院',img:scenic1,length:'703篇点评，建议玩2小时',tag:'荟萃华夏文明瑰宝之地',distance:'河南博物馆距离二七广场4.1公里'}]}
        ],
        list:[
           {
               tab:'DAY1',
                city:'郑州',
                title:'DAY1·一睹《国家宝藏》真容',
                banner:day1Banner,
                content:'第一天乘坐高铁或飞机，抵达河南省会郑州，漫游河南从逛河南博物馆开始，这里可以看到中原大地的起源文化，追溯到五千年前的华夏文明。下午逛完博物馆，搭车前往郑州人气中心二七广场，感受商城浓郁的商业氛围。',lineList:[{name:'河南博物院',img:scenic1,length:'703篇点评，建议玩2小时',tag:'荟萃华夏文明瑰宝之地',distance:'河南博物馆距离二七广场4.1公里'},{name:'二七广场',img:scenic1,length:'506篇点评，建议玩2小时',tag:'郑州中心商业中心',distance:'二七广场距离老蔡记（二七广场店）146米'},{name:'老蔡记（二七广场店）',img:scenic1,length:'96篇点评，9篇游记提及',tag:'地道小吃百年老店',distance:'老蔡记（二七广场店）距离德化商业步行街104米'},{name:'德化商业步行街',img:scenic1,length:'178篇点评，建议玩1小时',tag:'百年历史名街',distance:'河南博物馆距离二七广场4.1公里'}],
                hotelTitle:'住宿攻略',hotelContent:' 第一天乘坐高铁或飞机，抵达河南省会郑州，漫游河南从逛河南博物馆开始，这里可以看到中原大地的起源文化，追溯到五千年前的华夏文明。下午逛完博物馆，搭车前往郑州人气中心二七广场，感受商城浓郁的商业氛围。',hotelImg:hotelImg
           },
           {
               tab:'DAY2',
                city:'洛阳',
                title:'DAY1·一睹《国家宝藏》真容855',
                banner:day1Banner,
                content:'第一天乘坐高铁或飞机，抵达河南省会郑州，漫游河南从逛河南博物馆开始，这里可以看到中原大地的起源文化，追溯到五千年前的华夏文明。下午逛完博物馆，搭车前往郑州人气中心二七广场，感受商城浓郁的商业氛围。',lineList:[{name:'河南博物院',img:scenic1,length:'703篇点评，建议玩2小时',tag:'荟萃华夏文明瑰宝之地',distance:'河南博物馆距离二七广场4.1公里'},{name:'二七广场',img:scenic1,length:'506篇点评，建议玩2小时',tag:'郑州中心商业中心',distance:'二七广场距离老蔡记（二七广场店）146米'},{name:'老蔡记（二七广场店）',img:scenic1,length:'96篇点评，9篇游记提及',tag:'地道小吃百年老店',distance:'老蔡记（二七广场店）距离德化商业步行街104米'},{name:'德化商业步行街',img:scenic1,length:'178篇点评，建议玩1小时',tag:'百年历史名街',distance:'河南博物馆距离二七广场4.1公里'}],
                hotelTitle:'住宿攻略',hotelContent:' 第一天乘坐高铁或飞机，抵达河南省会郑州，漫游河南从逛河南博物馆开始，这里可以看到中原大地的起源文化，追溯到五千年前的华夏文明。下午逛完博物馆，搭车前往郑州人气中心二七广场，感受商城浓郁的商业氛围。',hotelImg:hotelImg
           },
           {
               tab:'DAY3',
                city:'郑州885',
                title:'DAY1·一睹《国家宝藏》真容665',
                banner:day1Banner,
                content:'第一天乘坐高铁或飞机，抵达河南省会郑州，漫游河南从逛河南博物馆开始，这里可以看到中原大地的起源文化，追溯到五千年前的华夏文明。下午逛完博物馆，搭车前往郑州人气中心二七广场，感受商城浓郁的商业氛围。',lineList:[{name:'河南博物院',img:scenic1,length:'703篇点评，建议玩2小时',tag:'荟萃华夏文明瑰宝之地',distance:'河南博物馆距离二七广场4.1公里'},{name:'二七广场',img:scenic1,length:'506篇点评，建议玩2小时',tag:'郑州中心商业中心',distance:'二七广场距离老蔡记（二七广场店）146米'},{name:'老蔡记（二七广场店）',img:scenic1,length:'96篇点评，9篇游记提及',tag:'地道小吃百年老店',distance:'老蔡记（二七广场店）距离德化商业步行街104米'},{name:'德化商业步行街',img:scenic1,length:'178篇点评，建议玩1小时',tag:'百年历史名街',distance:'河南博物馆距离二七广场4.1公里'}],
                hotelTitle:'住宿攻略',hotelContent:' 第一天乘坐高铁或飞机，抵达河南省会郑州，漫游河南从逛河南博物馆开始，这里可以看到中原大地的起源文化，追溯到五千年前的华夏文明。下午逛完博物馆，搭车前往郑州人气中心二七广场，感受商城浓郁的商业氛围。',hotelImg:hotelImg
           },
           {
               tab:'DAY4',
                city:'郑州558',
                title:'DAY1·一睹《国家宝藏》真容355',
                banner:day1Banner,
                content:'第一天乘坐高铁或飞机，抵达河南省会郑州，漫游河南从逛河南博物馆开始，这里可以看到中原大地的起源文化，追溯到五千年前的华夏文明。下午逛完博物馆，搭车前往郑州人气中心二七广场，感受商城浓郁的商业氛围。',lineList:[{name:'河南博物院',img:scenic1,length:'703篇点评，建议玩2小时',tag:'荟萃华夏文明瑰宝之地',distance:'河南博物馆距离二七广场4.1公里'},{name:'二七广场',img:scenic1,length:'506篇点评，建议玩2小时',tag:'郑州中心商业中心',distance:'二七广场距离老蔡记（二七广场店）146米'},{name:'老蔡记（二七广场店）',img:scenic1,length:'96篇点评，9篇游记提及',tag:'地道小吃百年老店',distance:'老蔡记（二七广场店）距离德化商业步行街104米'},{name:'德化商业步行街',img:scenic1,length:'178篇点评，建议玩1小时',tag:'百年历史名街',distance:'河南博物馆距离二七广场4.1公里'}],
                hotelTitle:'住宿攻略',hotelContent:' 第一天乘坐高铁或飞机，抵达河南省会郑州，漫游河南从逛河南博物馆开始，这里可以看到中原大地的起源文化，追溯到五千年前的华夏文明。下午逛完博物馆，搭车前往郑州人气中心二七广场，感受商城浓郁的商业氛围。',hotelImg:hotelImg
           },
           {
               tab:'DAY5',
                city:'郑州123',
                title:'DAY1·一睹《国家宝藏》真容123',
                banner:day1Banner,
                content:'第一天乘坐高铁或飞机，抵达河南省会郑州，漫游河南从逛河南博物馆开始，这里可以看到中原大地的起源文化，追溯到五千年前的华夏文明。下午逛完博物馆，搭车前往郑州人气中心二七广场，感受商城浓郁的商业氛围。',lineList:[{name:'河南博物院',img:scenic1,length:'703篇点评，建议玩2小时',tag:'荟萃华夏文明瑰宝之地',distance:'河南博物馆距离二七广场4.1公里'},{name:'二七广场',img:scenic1,length:'506篇点评，建议玩2小时',tag:'郑州中心商业中心',distance:'二七广场距离老蔡记（二七广场店）146米'},{name:'老蔡记（二七广场店）',img:scenic1,length:'96篇点评，9篇游记提及',tag:'地道小吃百年老店',distance:'老蔡记（二七广场店）距离德化商业步行街104米'},{name:'德化商业步行街',img:scenic1,length:'178篇点评，建议玩1小时',tag:'百年历史名街',distance:'河南博物馆距离二七广场4.1公里'}],
                hotelTitle:'住宿攻略',hotelContent:' 第一天乘坐高铁或飞机，抵达河南省会郑州，漫游河南从逛河南博物馆开始，这里可以看到中原大地的起源文化，追溯到五千年前的华夏文明。下午逛完博物馆，搭车前往郑州人气中心二七广场，感受商城浓郁的商业氛围。',hotelImg:hotelImg
           },
            
        ]
    };
  },
  mounted(){
     window.addEventListener("scroll", this.getScroll);
     window.console.log(this.daysList[0].hotel)
  },
  methods:{
      getScroll() {
        this.scrollTop =document.documentElement.scrollTop ||window.pageYOffset ||document.body.scrollTop;
        let Top =document.documentElement.scrollTop ||window.pageYOffset ||document.body.scrollTop;
        console.log(Top)
    },
  }

};
</script>

<style lang="less" scoped>
.box{
    padding-left: 0;
    padding-right:0;
}
.trip-detail-top {
    border-bottom:20/7.5vw solid #f2f2f2;
    .img-box {
      height: 400/7.5vw;
      border-radius: 10/7.5vw;
      overflow: hidden;
      img {
        display: block;
        width: 100%;
      }
    }
    .trip-item-title {
      padding:0 30/7.5vw;
      font-size: 36/7.5vw;
      line-height: 72/7.5vw;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .trip-item-tag {
      display: flex;
      flex-wrap: wrap;
      padding:0 30/7.5vw;
      > span {
        padding: 0 8/7.5vw;
        margin-right: 10/7.5vw;
        margin-bottom: 10/7.5vw;
        border: 1px solid #e7bc79;
        border-radius: 6/7.5vw;
        font-size: 24/7.5vw;
        text-align: center;
        color: #e7bc79;
      }
    }
    .trip-item-collection {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding:0 30/7.5vw;
        margin-top:10/7.5vw;
        margin-bottom:20/7.5vw;
        font-size: 28/7.5vw;
        color: #E7BC79;
            .img-box{
                width: 48/7.5vw;
                height: 48/7.5vw;
                margin-right: 10/7.5vw;
                margin-bottom: 10/7.5vw;
                border-radius: 50%;
                overflow: hidden;
            >img{
                display: block;
                width: 100%;
            }
        }
    }
}
.trip-list-box{
    position: relative;
    margin-bottom:40/7.5vw;
    .trip-list-title{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 82/7.5vw;
        padding:0 30/7.5vw;
        border-bottom: 1px solid #f2f2f2;
        font-size: 32/7.5vw;
        font-weight: bold;
        >a{
            font-size: 28/7.5vw;
            color: #42DAC0;
        }
    }
    .trip-list-content{
        padding:0 30/7.5vw;
        .trip-list-item{
            .item-title{
                 font-family: DINCond-Bold;
                margin:10/7.5vw 0 0 -8/7.5vw;
                color: #0FD2B2;
                font-size: 28/7.5vw;
                i{
                    display: inline-block;
                    width:20/7.5vw;
                    height: 20/7.5vw;
                    margin-right: 15/7.5vw;
                    border-radius: 50%;
                    border: 1px solid #0FD2B2;
                    vertical-align: middle;
                }
            }
            .item-content{
                padding-left: 20/7.5vw;
                border-left: 1px solid #0FD2B2;
                >h3{
                     font-family: DINCond-Bold;
                    line-height: 72/7.5vw;
                    font-size: 32/7.5vw;
                    font-weight: 700;
                }
                >p{
                    line-height: 45/7.5vw;
                    font-size: 28/7.5vw;
                    color: #999999;
                }
            }
        }
    }
    .trip-action-box{
        position: absolute;
        top:266/7.5vw;
        right: 30/7.5vw;
        img{
            display: block;
            margin:0 auto;
        }
        p{
            font-size: 20/7.5vw;
            color:#0FD2B2;
            text-align: center;
        }
        .collection{
            margin-bottom: 40/7.5vw;
            >img{
                width: 54/7.5vw;
            }
        }
        .share{
            >img{
                width:48/7.5vw;
            }
        }
    }
}
.trip-days-box{
   
    .trip-days-title{
        width:100%;
        line-height: 84/7.5vw;
        padding-bottom:10/7.5vw;
        border-bottom:1px solid #f2f2f2;
        box-sizing: border-box;
        .trip-days-titleList{
            display: flex;
            justify-content: space-between;
            height: 100%;
            padding:0 30/7.5vw;
            .title-item{
                color:#999;
                >P{
                    font-family: DINCond-Bold;
                    font-size: 28/7.5vw;
                    line-height: 1;
                    font-weight: 700;
                }
                >img{
                    display: none;
                }
                &.active{
                    color: #0FD2B2;
                    font-size: 36/7.5vw;
                    >img{
                        display: block;
                        width: 58/7.5vw;
                        margin:0 auto;
                    }
                }
            }
        }
    }
    .trip-day{
        padding:0 30/7.5vw;
        .trip-day-location{
            margin-top:20/7.5vw;
            line-height: 72/7.5vw;
            color: #24D5B7;
            font-size: 28/7.5vw;
            >i{
                vertical-align: middle;
                margin-right:10/7.5vw;
            }
        }
        .trip-day-title{
            font-size: 32/7.5vw;
            line-height: 72/7.5vw;
        }
        .trip-img-box{
            height: 399/7.5vw;
            border-radius: 10/7.5vw;
            overflow: hidden;
            >img{
                display: block;
                width: 100%;
            }
        }
        .trip-content-box{
            font-size: 28/7.5vw;
            line-height: 45/7.5vw;
        }
    }
    .trip-detail-box{
        .content-info-title{
                line-height: 45/7.5vw;
                font-size: 32/7.5vw;
                >img{
                    width: 32/7.5vw;
                    vertical-align: middle;
                    margin-right: 13/7.5vw;
                }
            }
            .content-info-box{
                height: 166/7.5vw;
                padding-left:30/7.5vw;
                border-left: 1px solid #0FD2B2;
                margin-left:16/7.5vw;
                font-size: 24/7.5vw;
                line-height: 45/7.5vw;
                p{
                    font-size: 24/7.5vw;
                    color: #666;
                }
                span{
                    color: #118308;
                }
                
            }
         .trip-line-box{
            padding:0 30/7.5vw;
            
            .trip-line-content{
                display: flex;
                justify-content: space-between;
                .line-content-img{
                    width: 200/7.5vw;
                    height: 200/7.5vw;
                    >img{
                        display: block;
                        width: 100%;
                    }
                }
            }
            .trip-distance{
                line-height: 48/7.5vw;
                font-size: 28/7.5vw;
                color: #666;
                i{
                    display: inline-block;
                    width: 10/7.5vw;
                    height: 10/7.5vw;
                    border-radius: 50%;
                    background: #0FD2B2;
                    margin:0 25/7.5vw 0 11/7.5vw;
                }
                .left-line{
                    margin-left:16/7.5vw;
                    border-left: 1px solid #0FD2B2;
                    height: 38/7.5vw;
                }
            }
            
        }
        .trip-hotel{
                .content-info-box{
                    border:0;
                    color: #333;
                    font-size: 28/7.5vw;
                    height:auto;
                }
            }
    }
   
}
</style>